<template>
    <div>

        <div class="dtop">

            <div class="header">
                <router-link to>
                    <van-icon @click="$router.back(-1)" name="arrow-left" size="30" color="gray"/>
                </router-link>
                <div>
                    <p style="font-size:20px;">评论</p>
                </div>
                <router-link to="/search">
                    <van-icon name="search" size="30" color="gray"/>
                </router-link>
            </div>

            <!-- <van-cell> -->
            <div class="top">
                <van-image class="imagemargin" width="100px" :src="picUrl==null?require('@/assets/bowl.jpg'):picUrl" />
                <div class="topname">
                    <span class="topn">{{name}}</span>
                    <!-- <span>-歌手-</span> -->
                </div>
            </div>
            <!-- </van-cell> -->
        </div>

        <div style="height:7px;background:#eee"></div>

        <div class="title">
            <span>评论区</span>
        </div>
        <van-divider class="margin"/>
        
        <!-- likedCount  content time  user  nickname avatarUrl   -->

        <div class="cbox" v-for="(item, index) in hotComments" :key="index">
            <!-- <van-cell @click="$router.push({name:'music',params:{id:item.id, name:item.name, pic:item.picUrl}})" style="text-align:left;" v-for="(item,index) in songlists" :key="index"> -->
              <div class="index">
                <van-image class="dimagemargin" width="40px" height="40px" :src="item.user.avatarUrl" />
                <div class="indexname">
                    <span class="amz">
                        <span class="song">{{item.user.nickname}} </span>
                        <div style="margin:2px"></div>
                        <span class="singer">{{ item.time | getLocalTime}}</span>
                    </span>
                    <!-- <van-icon name="more-o" size="30" color="gray"/> -->
                </div>
                <div class="zan">
                    <span>{{item.likedCount}}</span>
                    <van-icon name="good-job-o" size="20" color="gray"/>
                </div>
              </div> 
              <div>
                <div class="text">
                    {{item.content}}
                </div>
              </div>
              <div style="height:1px; margin:5% 0; background:#ddd"></div>
            <!-- </van-cell> -->
        </div>
    </div>
</template>

<script>
import List from '@/api/index'
export default {
  data(){
    return{
      hotComments:[],
      picUrl:'',
      name:'',
    }
  },mounted(){
    this.picUrl = this.$store.getters.getSongList[this.$store.getters.getSongCur].pic;
    this.name = this.$store.getters.getSongList[this.$store.getters.getSongCur].name;
    let _this = this;
    List.getComment(this.$route.params.id).then(function(res){
      _this.hotComments = res.data.hotComments;
      console.log(_this.hotComments)
    })
  },
  filters:{
    getLocalTime(nS){     
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/,' ');     
    }
  }
}
</script>

<style scoped>
.dtop{
  /* background: #ddd; */
}
.top{
  /* border: 1px solid #000; */
  display:flex;
  margin: 5% 0;
}
.topname{
  /* border: 1px solid #000; */
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;

}
.imagemargin{
  margin-left: 33px;
  margin-right: 25px;
  /* border: 1px solid #000; */
}
.vflex{
  display: flex;
  flex-direction:row;
  align-items: center;
  /* border: 1px solid #000; */
}
.topn{ 
  height: 20%;
  width: 100%;
  font-size: 20px;
  font-size:18px;
  margin-bottom: 0%;
  /* border: 1px solid #000; */
}
.margin{
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 5%;
}
.title{ 
  height:40px; 
  line-height:75px; 
  display:flex;
  justify-content:space-between
}
.title span{
  margin-left: 25px;
  font-size: 18px;
}
.index{
  /* border: 1px solid #000; */
  display:flex;
  flex-direction: row;
  margin-right: 7%;
  margin-left: 7%;
  margin-bottom: 1%;
  align-items: center;
}
.indexname{
  /* border: 1px solid #000; */
  width: 50%;
  margin-right: 13%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.song{
  font-size: 16px;
}
.singer{
  font-size: 12px;
  color: gray;
}
.dimagemargin{
  margin-left: 5px;
  margin-right: 25px;
  /* border: 1px solid #000; */
}
.amz{
  display:flex;
  flex-direction: column;
}
.header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 3% 5%;
}
.zan{
  display: flex;
  flex-direction: row;
  align-items: center;
  /* border: 1px solid #000; */
}
.cbox{
  display: flex;
  flex-direction: column;
}
.text{
  /* border: 1px solid #000; */
  margin-right: 8%;
  margin-left: 24%;
  word-wrap:break-word;  
  word-break:break-all;  
  overflow: hidden; 
}

</style>